<template>
  <div id="app">
    <div class="tab">
      <div class="tab_list">
        <ul>
          <li
            v-for="(tabData, index) in tabDatas"
            :class="flag == index ? 'current' : ''"
            :key="tabData.id"
            @click="toggleTab(index)"
          >
            {{ tabData.title }}
          </li>
        </ul>
      </div>
      <div class="tab_con">
        <div
          v-for="(tabData, index) in tabDatas"
          :class="['item', { div_show: flag == index ? true : false }]"
          :key="tabData.id"
        >
          {{ tabData.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 本地图片的引入使用import导入方式进行使用
// vue组件使用是ES6模块化的规范
export default {
  name: "App",
  components: {},
  // data:对象/函数在组件中只能是函数
  data() {
    return {
      tabDatas: [
        {
          id: 1,
          title: "商品介绍",
          content: "商品介绍模块内容",
        },
        {
          id: 2,
          title: "规格与包装",
          content: "规格与包装模块内容",
        },
        {
          id: 3,
          title: "售后保障",
          content: "售后保障模块内容",
        },
        {
          id: 4,
          title: "商品评价（10000+）",
          content: "商品评价（10000+）模块内容",
        },
        {
          id: 5,
          title: "手机社区",
          content: "手机社区模块内容",
        },
      ],
      flag: 0,
    };
  },
  methods: {
    toggleTab(index) {
      this.flag = index;
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

.tab {
  width: 978px;
  margin: 100px auto;
}

.tab_list {
  height: 39px;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab_list li {
  float: left;
  height: 39px;
  line-height: 39px;
  padding: 0 20px;
  text-align: center;
  cursor: pointer;
}

.tab_list .current {
  background-color: #c81623;
  color: #fff;
}

.item {
  display: none;
}

.div_show {
  display: block;
}
</style>
